import React, { Component } from 'react'
import Button from 'antd/lib/button'

import styles from './sass/control-center.scss'

import axios from 'axios'
import Api from '../../../config/api'

import Card from 'antd/lib/card'
import Col from 'antd/lib/col'
import Row from 'antd/lib/row'
import Progress from 'antd/lib/progress'

class Box extends Component {
    constructor(props) {
        super(props)
        this.state = {
            percent1: 0,
            percent2: 0,
            percent3: 0,
            percent4: 0,
            percent5: 0,
            percent6: 0,
            percent7: 0,
            percent8: 0,
            percent9: 0,
            percent10: 0,
            percent11: 0,
            pText1: '加载',
            pText2: '加载',
            pText3: '加载',
            pText4: '加载',
            pText5: '加载',
            pText6: '加载',
            pText7: '加载',
            pText8: '加载',
            pText9: '加载',
            pText10: '加载',
            pText11: '加载',        
            pStatus1: 'active',
            pStatus2: 'active',
            pStatus3: 'active',
            pStatus4: 'active',
            pStatus5: 'active',
            pStatus6: 'active',
            pStatus7: 'active',
            pStatus8: 'active',
            pStatus9: 'active',
            pStatus10: 'active',
            pStatus11: 'active',
        }
    }
    admit(url, num, e) {
        let btn = e.target;
        btn.disabled = true;
        this.setState({
            ['percent' + num]: 0,
            ['pStatus' + num]: 'active',
            ['pText' + num]: '加载中...'
        })
        this['interC' + num] = setInterval(() => {
            if (this.state['percent' + num] === 80) {
                clearInterval(this['interC' + num]);
                axios.post(Api[url]).then((res) => {
                    this['interC1' + num] = setInterval(() => {
                        if (this.state['percent' + num] === 90) {
                            clearInterval(this['interC1' + num]);
                        }
                        else {
                            this.setState({
                                ['percent' + num]: this.state['percent' + num] + 1
                            })
                        }
                    }, 20)
                    if (res) {
                        setTimeout(() => {
                            this['interC2' + num] = setInterval(() => {
                                if (this.state['percent' + num] === 100) {
                                    clearInterval(this['interC2' + num]);
                                    this.setState({
                                        ['pStatus' + num]: 'success',
                                        ['pText' + num]: '重新加载'
                                    })
                                    btn.disabled = false;
                                }
                                else {
                                    this.setState({
                                        ['percent' + num]: this.state['percent' + num] + 1
                                    })
                                }
                            }, 20)
                        }, 200)
                    } else {
                        this.setState({
                            ['pStatus' + num]: 'exception',
                            ['pText' + num]: '重新加载'
                        })
                        btn.disabled = false;
                    }
                }).catch((error) => {
                    console.log(error)
                })
            }
            else {
                this.setState({
                    ['percent' + num]: this.state['percent' + num] + 1
                })
            }
        }, 20)
    }
    render() {
        return (
            <div className={styles["cc-card-box"]}>
                <Row gutter={16}>
                    <Col span={6}>
                        <Card title="所有信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadAllInfo', '1')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText1}</Button>]}>
                            <Progress type="circle" percent={this.state.percent1} status={this.state.pStatus1} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="账号信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadAccountInfo', '3')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText3}</Button>]}>
                            <Progress type="circle" percent={this.state.percent3} status={this.state.pStatus3} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="产品信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadProductInfo', '7')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText7}</Button>]}>
                            <Progress type="circle" percent={this.state.percent7} status={this.state.pStatus7} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="通道信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadGateWayInfo', '5')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText5}</Button>]}>
                            <Progress type="circle" percent={this.state.percent5} status={this.state.pStatus5} />
                        </Card>
                    </Col>
                </Row>
                <Row gutter={16} style={{ marginTop: '20px' }} >
                    <Col span={6}>
                        <Card title="用户模板信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadUserTemplate', '8')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText8}</Button>]}>
                            <Progress type="circle" percent={this.state.percent8} status={this.state.pStatus8} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="用户签名信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadSign', '11')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText11}</Button>]}>
                            <Progress type="circle" percent={this.state.percent11} status={this.state.pStatus11} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="系统黑名单" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadSysBlackList', '4')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText4}</Button>]}>
                            <Progress type="circle" percent={this.state.percent4} status={this.state.pStatus4} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="账号黑名单" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadAccountBlackList', '2')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText2}</Button>]}>
                            <Progress type="circle" percent={this.state.percent2} status={this.state.pStatus2} />
                        </Card>
                    </Col>
                </Row>
                <Row gutter={16} style={{ marginTop: '20px' }} >
                    <Col span={6}>
                            <Card title="账号白名单" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadWhiteList', '10')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText10}</Button>]}>
                                <Progress type="circle" percent={this.state.percent10} status={this.state.pStatus10} />
                            </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="关键词信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadKeyWordInfo', '6')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText6}</Button>]}>
                            <Progress type="circle" percent={this.state.percent6} status={this.state.pStatus6} />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="号段信息" bordered={false} actions={[<Button onClick={this.admit.bind(this, 'loadMate', '9')} style={{ width: '100%' }} type="primary" icon="reload">{this.state.pText9}</Button>]}>
                            <Progress type="circle" percent={this.state.percent9} status={this.state.pStatus9} />
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Box